<template>
  <div :style="{ 'width': width }" class="container max-w-962px">
    <InputWrapper :borderColor="borderColor ? borderColor : '#ffffff'" :hasBorder="hasBorder ? true : false"
      borderRadius="50px" class="search-inputWrapper">
      <template #prefix>
        <BaseIcon iconName="search" class="search-prefix" style="color: #9C9E9C"></BaseIcon>
      </template>
      <input v-model="searchValue" @keyup.enter="searchChange" class="wrapper-input" @input="goodsRelationSearch"
        :placeholder="t('home.txt16')" type="text" />
      <template #suffix>
        <div @click="searchChange" class="search-suffix cursor-pointer">
          <span>{{ t('common.search') }}</span>
        </div>
      </template>
    </InputWrapper>
    <el-scrollbar height="480px" class="search-list" wrap-class="search-list">
      <!-- 搜索列表 -->
      <div v-if="searchValue" style="border-radius: 6px;overflow: hidden;">
        <p v-for="(item, index)  in searchList" @click="clickSearch(item)" v-html="item" :key="index" class="list-item"></p>
      </div>
      <div v-else-if="historyList[typeFlag].length > 0" style="border-radius: 6px;overflow: hidden;" class="bg-white">
        <p class="w-100% flex-cb pa-20px color-#9C9E9C box-border pb-10px"> <span
            class="cursor-pointer">{{ t('home.txt19') }}</span> <span class="cursor-pointer" @click="deleteAllHistory">{{ t('home.txt20') }}</span></p>
        <p v-for="(item, index) in historyList[typeFlag]" @click="clickSearch(item)" :key="index" class="history-item"><span>{{ item }}</span> <span
            class="delete-item" @click="deleteHistory(index)">{{ t('home.txt21') }}</span></p>
      </div>
      <!-- <div v-else style="border-radius: 6px;overflow: hidden;">
        <p v-for="(item, index) in searchList" v-html="item" :key="index" class="list-item"></p>
      </div> -->
      <!-- <div v-if="showType"></div> -->
      <!-- 历史记录 -->
      <!-- <div v-if="showType == '2'" class="history-list">
        <div class="history-one">
          <div class="one-a">{{t('home.txt17')}}</div>
          <div class="one-b">
            <BaseIcon iconName="search" class="search-prefix" style="color: #9C9E9C"></BaseIcon>
            <span>{{t('home.txt18')}}</span>
          </div>
        </div>
        <div class="history-two">
          <span class="two-item" v-for="item in links" :key="item.value">{{ item.value }}</span>
        </div>
      </div> -->
    </el-scrollbar>
  </div>
</template>
  
<script lang="ts" setup>
import InputWrapper from '@/components/inputWrapper/index.vue'
import { onMounted, ref, computed } from 'vue'
// showType是字符串为1时是搜索，为2时是搜索记录
import { goodsRelationSearchApi, factoryRelationSearchApi, goodsSearchApi } from '@/api/indexpage/index.js'
import { useI18n } from "vue-i18n";
import { useRouter } from "vue-router";
import { useAppStore } from '@/stores/modules/app'
const appStore = useAppStore()
//用于判断是选商品还是选商家 0是商品 1是商家
const typeFlag = computed(() => appStore.typeFlag)
const { t } = useI18n()
const { currentRoute,push } = useRouter()
const props = defineProps(['showType', 'hasBorder', 'borderColor'])
const emit = defineEmits(['searchChange'])


const width = ref('100%')


onMounted(() => {
  getHistory()
})

//历史记录 下标0是商品历史记录，下标1是工厂历史记录
const historyList = ref<any>([[], []])
//获取历史记录
const getHistory = () => {
  let history = localStorage.getItem('history')
  historyList.value = history? JSON.parse(history) : [[], []]
}
//删除历史记录单条
const deleteHistory = (val) => {
  let tempArr = historyList.value[typeFlag.value].filter((item,index) => index != val)
  historyList.value[typeFlag.value] = tempArr
  localStorage.setItem('history', JSON.stringify(historyList.value))
  getHistory()
}
//删除全部记录
const deleteAllHistory = () => {
  historyList.value[typeFlag.value] = []
  localStorage.setItem('history', JSON.stringify(historyList.value))
  getHistory()
}
//搜索框
//搜索框内容字段
const searchValue = ref<any>('')
let timer: any = null
//搜做列表
const searchList = ref<any>([])
//输入内容出现查询下拉内容
const goodsRelationSearch = () => {
  clearTimeout(timer)
  if (!searchValue.value) {
    return
  }
  timer = setTimeout(() => {
    if (typeFlag.value == 0) {
      goodsRelationSearchApi({ param: searchValue.value }).then(res => {
        if (res.code == 200) {
          searchList.value = res.data
        }
      })
    } else if (typeFlag.value == 1) {
      factoryRelationSearchApi({ param: searchValue.value }).then(res => {
        if (res.code == 200) {
          searchList.value = res.data
        }
      })
    }

  }, 500)

}
//点击下拉查询商品或工厂
const clickSearch = (val) => {
  let chineseStr =  val.match(/[\u4e00-\u9fff]+/g) || []
  searchValue.value = chineseStr.join('')
  searchChange()
}
//查询商品或工厂
const searchChange = () => {
  if(typeFlag.value == 0 && searchValue.value) {
    let tempArr =  historyList.value[0].filter(x => x != searchValue.value)
    tempArr.unshift(searchValue.value)
    historyList.value[0] = tempArr
    localStorage.setItem('history', JSON.stringify(historyList.value))
  } else if(typeFlag.value == 1 && searchValue.value) {
    let tempArr =  historyList.value[1].filter(x => x != searchValue.value)
    tempArr.unshift(searchValue.value)
    historyList.value[1] = tempArr
    localStorage.setItem('history', JSON.stringify(historyList.value))
  }
  if(currentRoute.value.path != '/home/search'){
    appStore.setSearchValue(searchValue.value)
    push('/home/search')
  } else {
    appStore.setSearchValue(searchValue.value)
  }
}
</script>
<style lang="less" scoped>
.container {
  position: relative;
  z-index: 100;
}

.history-list {
  padding: 20px 20px;
  background-color: white;
  border-radius: 6px;

  .history-one {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 23px;

    .one-a {
      color: #333333;
      font-size: 14px;
    }

    .one-b {
      display: flex;
      align-items: center;
      margin-left: 8px;
      color: #9C9E9C;
      font-size: 14px;
    }
  }

  .history-two {
    display: flex;
    flex-wrap: wrap;

    .two-item {
      color: #9C9E9C;
      font-size: 14px;
      margin-left: 30px;
      margin-bottom: 10px;
    }

    .two-item:first-child {
      margin-left: 0px;
    }

    .two-item:hover {
      color: #E1251B;
    }
  }
}

.search-list {
  display: none;
  width: 86%;
  margin-left: 2%;
  position: absolute;
  z-index: 9000000;
  top: 55px;
  overflow: visible;

  .history-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    height: 35px;
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    font-size: 14px;
    color: #1A1A1A;
    // text-align: center;

    line-height: 35px;
    background-color: white;
    cursor: pointer;

    .delete-item {
      display: none;
      color: #6E6E6E;
      cursor: pointer;
    }
  }

  .history-item:hover {
    background-color: rgb(246, 246, 246);

    .delete-item {
      display: inline;
    }
  }

  .list-item {
    display: block;
    box-sizing: border-box;
    height: 35px;
    width: 100%;
    padding-left: 20px;
    font-size: 14px;
    color: #6e6e6e;
    // text-align: center;

    line-height: 35px;
    background-color: white;
    cursor: pointer;
  }

  .list-item:hover {
    color: #E1251B;
  }
}

.search-inputWrapper:focus-within+.search-list {
  display: block !important;
  animation-name: showList;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

.search-list:hover {
  display: block !important;
}

@keyframes showList {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.search-inputWrapper {
  justify-content: space-between;
  height: 50px;
  width: 100%;
  overflow: hidden;

  .search-prefix {
    width: 6%;
    min-width: 50px;
  }

  .wrapper-input {
    width: 82%;
    height: 100%;
    border: none;
    font-size: 14px;
  }

  .wrapper-input:focus-visible {
    outline: none;
  }

  .search-suffix {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 12%;
    min-width: 123px;
    height: 100%;
    background-color: #E1251B;
    text-align: center;
    font-weight: bold;
    font-size: 20px;
    color: white;
    // line-height: 50px;
  }
}
</style>
  
<!-- <style>
.my-autocomplete {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  left: 6% !important;
}

.my-autocomplete .el-scrollbar {
  background-color: white;
  border: 1px solid var(--el-border-color-light);
  box-shadow: var(--el-box-shadow-light);
}

.my-autocomplete .el-autocomplete-suggestion {
  padding: 0px 11%;
  background-color: transparent;
}


.my-autocomplete li {
  line-height: normal;
  padding: 7px;
  min-width: 200px;
}

.my-autocomplete li:hover {
  background-color: #fff;
  color: var(--el-color-primary);
}

.my-autocomplete .el-popper__arrow::before {
  width: 0px;
}

.search {
  border-radius: 40px;

  .el-input-group__append {
    background-color: var(--el-color-primary);
    color: #fff;
  }

  .el-input__inner {
    width: var(--width);
  }

  .el-input-group__append {
    margin-top: -0.5px;
    width: 90px;
    height: 43.5px;

    .search-btn {
      margin-right: 6px;
    }
  }

  .el-input {
    --el-input-border-radius: 40px !important;
  }

  .el-input-group {
    height: 42px;
  }



}

/deep/.el-popper[x-placement^=bottom] .popper__arrow::after {
  display: none !important;
}

/deep/.el-popper .el-popper__arrow,
.el-popper .el-popper__arrow::after {
  display: none !important;
}
</style> -->

  